<template>
  <div class="order_mod" :class="themeClass">
    <v-nav :title="$t('Order.Mining order')"></v-nav>
    <div class="order_mod_box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
        <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
          <div class="order_mod_box_list">
            <div class="order_mod_box_list_info" v-for="(item, index) in orderList" :key="index">
              <div class="desc">
                <div class="desc_left">
                  <img :src="item.mining_config_logo" alt="" />
                  <span>{{ item.mining_config_name }}</span>
                </div>
                <div class="desc_right">
                  <!-- 隐藏 -->
                  <!-- <van-button v-if="item.radio == 0" color="#EE0A24" size="small" @click="statusClick(item.id)">{{ $t('Order.Click to redeem') }}</van-button> -->
                  <van-button v-if="item.radio == 0" color="#EE0A24" size="small">{{ $t('Order.in progress') }}</van-button>
                  <van-button v-if="item.radio == 1" color="#DAAB51" size="small">{{ $t('Order.completed') }}</van-button>
                  <van-button v-if="item.radio == 2" color="#DAAB51" size="small">{{ $t('Order.redeemed') }}</van-button>
                </div>
              </div>
              <div class="data">
                <p>
                  <span>{{ $t('Order.Purchase time') }}</span>
                  <span>{{ item.create_time }}</span>
                </p>
                <p>
                  <span>{{ $t('Order.purchasing price') }}(USDT)</span>
                  <span>{{ item.buy_amount }}</span>
                </p>
                <p v-if="item.radio == 0">
                  <span>{{ $t('Order.Remaining') }}</span>
                  <span>{{ item.residue }}({{ $t('Order.day') }})</span>
                </p>
                <p v-else>
                  <span>{{ $t('Order.cycle') }}</span>
                  <span>{{ item.cycle }}({{ $t('Order.day') }})</span>
                </p>
                <p>
                  <span>{{ $t('Order.End Time') }}</span>
                  <span>{{ item.update_time || '-' }}</span>
                </p>
              </div>
              <div class="data">
                <p v-if="item.radio == 2">
                  <span>{{ $t('Order.Default ratio') }}</span>
                  <span>{{ item.default }}%</span>
                </p>
                <p v-else>
                  <span>{{ $t('Order.Daily rate of return') }}</span>
                  <span>{{ item.income_type == 0 ? item.profit_ratio + '%' : item.profit_ratio }}</span>
                </p>
                <p v-if="item.radio == 2">
                  <span>{{ $t('Order.redemption amount') }}(USDT)</span>
                  <span>{{ item.redemption_amount }}</span>
                </p>
                <p v-else>
                  <span>{{ $t('Order.Daily earnings') }}(USDT)</span>
                  <span>{{ item.daily_income }}</span>
                </p>
                <p>
                  <span>{{ $t('Order.Cumulative income') }}(USDT)</span>
                  <span>{{ item.earnings }}</span>
                </p>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Order',
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      orderList: [],
      isDayTime: false,
      loading: false
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'))
    },
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  created() {
    this.getMyOrderList()
  },
  methods: {
    async getMyOrderList() {
      this.loading = true
      await this.$https.get('/coin/getMiningOrderList?page=' + this.page).then(res => {
        if (this.refreshing) {
          this.orderList = []
          this.refreshing = false
        }
        this.orderList = [...this.orderList, ...res.data.data]
        this.loading = false

        if (this.page >= res.data.last_page) {
          this.finished = true
        } else {
          this.page++
        }
      })
      this.loading = false
    },
    // 上拉加载处理函数
    onLoad() {
      this.getMyOrderList()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.page = 1
      this.loading = true
      this.onLoad()
    },
    statusClick(id) {
      this.$dialog
        .confirm({
          title: this.$t('info.info17'),
          confirmButtonText: this.$t('info.info10'),
          cancelButtonText: this.$t('info.info11'),
          confirmButtonColor: 'rgb(218, 171, 81)',
          cancelButtonColor: 'rgb(218, 171, 81)',
          theme: 'round-button'
        })
        .then(() => {
          this.$https.post('/coin/revokeMiningOrder', { id: id }).then(res => {
            if (res != undefined && res.code == 1) {
              this.onRefresh()
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>
